<template>
  <a-modal
    class="dialog-options-setting"
    :title="title"
    :width="width"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @before-close="handleCancel"
    @cancel="handleCancel"
  >
    <div class="content" :style="{ height: height }">
      <div class="list-all">
        <div class="search-box">
          <a-input
            v-model="keyWords"
            placeholder="输入搜索"
            size="small"
            @input="onsearch"
          ></a-input>
        </div>
        <div class="list">
          <div class="select-item" @click="onSelectAllClicked">
            <span
              class="ant-checkbox"
              :class="isSelectAll ? 'ant-checkbox-checked' : ''"
            >
              <span class="ant-checkbox-inner"></span>
            </span>
            全选已加载
          </div>
          <div
            v-for="(item, i) in dataSourceFilter"
            :key="i"
            class="select-item"
            @click="onOptionItemClick(item, i)"
          >
            <span
              class="ant-checkbox"
              :class="
                valueSelected.includes(item.value) ? 'ant-checkbox-checked' : ''
              "
            >
              <span class="ant-checkbox-inner"></span>
            </span>
            {{ item.label }}
          </div>
          <a-button
            v-if="
              fieldInfo &&
              fieldInfo.total &&
              fieldInfo.total > fieldInfo.optionsAll.length
            "
            class="add-more"
            size="small"
            @click="addMore"
            >加载更多</a-button
          >
        </div>
      </div>
      <div class="list-select">
        <div class="list">
          <div v-if="dataSelected.length > 0" class="select-item selected">
            已选
            <span class="count-number">{{ dataSelected.length }}</span>
          </div>
          <div v-for="(item, j) in dataSelected" :key="j" class="select-item">
            {{ item.label }}
            <span class="icon-delete ne-del" @click="deleteItem(item)"></span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button
        type="primary"
        :disabled="dataSelected.length === 0"
        @click="handleOk"
        >确定</a-button
      >
    </div>
  </a-modal>
</template>
<script lang="ts">
import Vue from 'vue'
import KV from '../form/kv'
import { KeyValueStore } from '../vueGridLayout/interfate/grid-Item-data-inteface'

const defaultSetting: KeyValueStore = {
  valueSelected: [],
  dataSelected: [],
  keyWords: '',
}

export default Vue.extend({
  props: {
    height: {
      type: String,
      default() {
        return '400px'
      },
    },
    width: {
      type: String,
      default() {
        return '400px'
      },
    },
    title: {
      type: String,
      default() {
        return ''
      },
    },
    confirmLoading: {
      type: Boolean,
      default() {
        return false
      },
    },
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    fieldInfo: {
      type: Object,
      default() {
        return {}
      },
    },
    // dataSource:{
    //   type: Array,
    //   default():Array<KeyValueStore>{
    //     return []
    //   }
    // },
    currentSavedOptions: {
      type: Array,
      default() {
        return []
      },
    },
    tableName: {
      type: String,
      default() {
        return ''
      },
    },
    fieldName: {
      type: String,
      default() {
        return ''
      },
    },
  },
  data() {
    return defaultSetting
  },
  computed: {
    dataSource() {
      const that = this as any
      return that.fieldInfo ? (that.fieldInfo.optionsAll as Array<KV>) : []
    },
    dataSourceFilter() {
      const that = this as any
      return that.dataSource
      // return that.filterOption(that.keyWords)
    },
    isSelectAll() {
      const that = this as any
      const dataSource = that.dataSourceFilter as Array<KeyValueStore>
      const valueSelected = that.valueSelected as Array<string>
      return (
        dataSource &&
        dataSource.length > 0 &&
        dataSource.every((item: KeyValueStore) =>
          valueSelected.includes(item.value)
        )
      )
    },
  },
  methods: {
    /**
     * 同步选项
     */
    syncSelectItems() {
      setTimeout(() => {
        const that = this as any
        const valueSelected: Array<string> = []
        const dataSelected: Array<any> = []
        that.currentSavedOptions.forEach((labelItem: any) => {
          valueSelected.push(labelItem.value)
          dataSelected.push(labelItem)
        })
        this.$set(this, 'valueSelected', valueSelected)
        this.$set(this, 'dataSelected', dataSelected)
      }, 100)
    },
    /**
     * 点击确定
     */
    handleOk() {
      this.$emit('handle', {
        emitor: this,
        status: true,
        options: this.dataSelected,
      })
    },
    /**
     * 点击取消
     */
    handleCancel() {
      this.clear()
      this.$emit('handle', { emitor: this, status: false })
    },
    /**
     * 删除选项
     */
    deleteItem(item: KeyValueStore) {
      this.valueSelected = this.valueSelected.filter(
        (filterItem: string) => filterItem !== item.value
      )
      this.dataSelected = this.dataSelected.filter(
        (filterItem: KeyValueStore) => filterItem.value !== item.value
      )
    },
    /**
     * 清空
     */
    clear() {
      this.valueSelected = []
      this.dataSelected = []
    },
    /**
     * 全选
     */
    onSelectAllClicked() {
      if (this.isSelectAll) {
        this.clear()
      } else {
        const dataSelected: Array<KeyValueStore> = []
        const valueSelected: Array<string> = []
        this.dataSource.forEach((dataItem: any) => {
          valueSelected.push(dataItem.value)
          dataSelected.push(dataItem)
        })
        this.dataSelected = dataSelected
        this.valueSelected = valueSelected
      }
    },
    /**
     * 选项点击事件
     */
    onOptionItemClick(item: KeyValueStore /* , index:number */) {
      if (!this.valueSelected.find((value: string) => item.value === value)) {
        this.valueSelected.push(item.value)
        this.dataSelected.push(item)
      } else {
        this.deleteItem(item)
      }
    },
    /**
     * 选项筛选
     */
    onsearch() {
      this.$emit('search-option', this.keyWords)
    },
    // filterOption(inputValue:string) {
    //   if(inputValue === '' ){
    //     return this.dataSource
    //   }
    //   return this.dataSource.filter((option:any) => {
    //     return option.label.includes(inputValue)
    //   })
    // },
    addMore() {
      this.$emit('onaddmorclick', this)
    },
  },
})
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: row;
  max-height: 448px;
}

.list-all {
  border-right: 1px solid #eaeaea;
  height: 100%;
  overflow: hidden;
  padding: 0 15px;
  width: 50%;

  .search-box {
    box-sizing: border-box;
    padding: 12px 0;
  }
}

.list {
  height: calc(100% - 60px);
  overflow-y: scroll;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }

  .select-item {
    color: #5d637e;
    cursor: pointer;
    font-size: 14px;
    height: 20px;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .ant-checkbox {
      transform: translateY(-0.5px) scale(0.9);
    }

    &.selected {
      color: #5d637e;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1px;
      line-height: 20px;
      padding-right: 0 !important;
    }

    .count-number {
      float: right;
      font-weight: 400;
    }
  }
}

.list-select {
  box-sizing: border-box;
  height: 100%;
  padding: 6px 14px;
  width: 50%;

  .list {
    height: 100%;

    .select-item {
      padding-right: 20px;
      position: relative;
    }

    .icon-delete {
      font-size: 17px;
      position: absolute;
      right: -2px;
      top: 0;
    }
  }
}

.dialog-options-setting {
  /deep/ .ant-modal {
    margin-left: 12vw;
    margin-top: 10vh;
  }
}
</style>
